<template>
    <div class="age-range-list-page">
        <el-card shadow="never" class="filter">
            <el-form
                label-suffix="："
                label-width="90px"
                label-position="right"
                ref="form"
            >
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="登录时间" prop="time">
                            <el-date-picker
                                v-model="time"
                                type="month"
                                value-format="timestamp"
                                :picker-options="{
                                    disabledDate: (time) => {
                                        if (new Date(time).getTime() >= new Date('2022/11/1').getTime()) return false;
                                        return true;
                                    }
                                }"
                                placeholder="选择月">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="border-b"></div>
                <div class="mt-4 text-center">
                    <el-button type="primary" @click="fetchData">搜索</el-button>
                    <el-button type="text" @click="onResetFilters">清空筛选条件</el-button>
                </div>
            </el-form>
        </el-card>
        <el-card shadow="never" class="mt-4">
            <div class="mt-4" v-loading="loading">
                <el-table :data="data">
                    <el-table-column label="名称" prop="name"></el-table-column>
                    <el-table-column label="所属企业" prop="company"/>
                    <el-table-column label="登录时间" prop="description">
                        <template slot-scope="{row}">
                            {{ row.visit_at | formatTime }}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    components: {
    },
    mixins: [require('../../mixins/CacheQuery').default],
    data() {
        return {
            loading: false,
            data: [],
            time: '',
        };
    },
    methods: {
        onResetFilters() {
            this.time = '';
            this.fetchData();
        },
        fetchData() {
            this.loading = true;

            const year = new Date().getFullYear();
            const month = new Date().getMonth();
            const time = this.time ? this.time : new Date(year, month, 1).getTime();
            API.get(`administrator/login-record/${time}`).then((res) => {
                this.data = res.map(item => {
                    item.name = item.name || item.company;
                    return item;
                });
            }).finally(() => {
                this.loading = false;
            });
        },
    },
    mounted() {
        this.fetchData();
    },
};
</script>

<style lang="scss" scoped>
.input-width {
    max-width: 300px;
}
</style>
